/**
 * Created by morefun on 2017/7/3.
 */
/*
HTML

1.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
  1).<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。
  2).所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
  3).浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，
  忽略DTD声明,将使网页进入怪异模式。
2.HTML5 为什么只需要写 <!DOCTYPE HTML>？
  1)HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
  而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
  其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
  BUT，HTML5不是的。
3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
  行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
  块级元素：div、ul、ol、li、dl、dd、dt、p、h1-h6、blockquote
  空元素：没有内容的HTML元素，例如：br、meta、hr、link、input、img
4.页面导入样式时，使用link和@import有什么区别？
  1)link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  2)link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  3)link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  4)link支持使用Javascript控制DOM去改变样式；而@import不支持。
5.介绍一下你对浏览器内核的理解？
  IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto ，现为Blink;
  内核主要分成两部分：
    1）渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。
       浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
       所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
    2）JS引擎则：解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
6.常见的浏览器内核有哪些？
  一、Trident内核代表产品Internet Explorer，又称其为IE内核。
  二、Gecko内核代表作品Mozilla FirefoxGecko，火狐浏览器。
  三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。
  四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
  IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto ，现为Blink;
7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
  1）HTML5 现在已经不是 SGML(标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
  2）拖拽释放(Drag and drop) API
     语义化更好的内容标签（header,nav,footer,aside,article,section）
     音频、视频API(audio,video)
     画布(Canvas) API
     地理(Geolocation) API
     本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
     sessionStorage 的数据在浏览器关闭后自动删除
     表单控件，calendar、date、time、email、url、search
     新的技术webworker, websocket, Geolocation
  3）* 移除的元素
     纯表现的元素：basefont，big，center，font, s，strike，tt，u；
     对可用性产生负面影响的元素：frame，frameset，noframes；
  4）支持HTML5新标签：
     * IE8/IE7/IE6支持通过document.createElement方法产生的标签，
     可以利用这一特性让这些浏览器支持HTML5新标签，
     浏览器支持新标签后，还需要添加标签默认的样式：
     * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
     <!--[if lt IE 9]>
     <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
     <![endif]-->
   5）如何区分： DOCTYPE声明\新增的结构元素\功能元素
8.简述一下你对HTML语义化的理解？
  1）选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  1）即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
  2）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  3）便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
9.HTML5的离线储存怎么使用，工作原理能不能解释一下？
  1)HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。
    之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
  2)服务器设置头信息：AddTypetext/cache-manifest .manifest
    html标签加：<html manifest="xxxx.manifest">
   CACHE MANIFEST
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
   NETWORK:
    login.asp
   FALLBACK:
    /html5/ /404.html
10.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
  在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
  如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，
  就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。
11.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
  共同点：都存储在客户端，
  不同点：1）存储大小：cookie数据大小不能超过4k。
            sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
         2）有效时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
            sessionStorage 数据在当前浏览器窗口关闭后自动删除。
            cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
         3）数据与服务器之间的交互方式：
            cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
            sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
12.iframe有那些缺点？
  iframe会阻塞主页面的onload事件；
  搜索引擎检索程序无法解读这种页面，不利于SEO；
  会影响页面的并行加载。
13.Label的作用是什么？是怎么用的？（加 for 或 包裹）
  label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
  <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
  <label>Date:<input type="text" name="B" /></label>
  就是一个文本提示标签，不过在label标签中加入for属性可以与相应的选项框进行捆绑，也就是说，在这种情况下你点击这个文本框就会活的点击选项框的效果
14.HTML5的form如何关闭自动完成功能？
  设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能
  设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能
15.如何实现浏览器内多个标签页之间的通信? (阿里)
  localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，
  实现不同标签页之间的通信。
  使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
  使用websoket进行通讯
16.webSocket如何兼容低浏览器？(阿里)
  Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
17.页面可见性（Page Visibility）API 可以有哪些用途？
  动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。
  document.addEventListener("visibilitychange", function(){
  })
18.如何在页面上实现一个圆形的可点击区域？
  1）<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  </map>
  2）css3：border-radius
  3）纯js实现 ，需要求一个点在不在圆上简单算法、获取鼠标坐标等等
19.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
  <div style="height:1px;overflow:hidden;background:black"></div>
20.网页验证码是干嘛的，是为了解决什么安全问题？
  防止恶意注册和暴力破解 所谓恶意注册和暴力破解都是用软件进行的。 人工注册再快，也需要一项一项输入资料，速度很慢，对服务器基本没有影响。
  如果没有验证码可以使用软件注册的话，可以同时运行成千上万个线程，一次能注册成千上万个用户，让服务器的数据库很快变得臃肿不堪，运行效率下降。
  如果一个无聊的人或竞争对手对某网站怀有敌意，那么这种方法很容易就能让对方瘫痪。
21.tite与h1的区别、b与strong的区别、i与em的区别？
  tite与h1
  tite是描述这个页面的主题的，h1一般是文章主题
  b与strong的区别、i与em的区别
  其实这两对标签最大区别就是后者是给搜索引擎看的，前者是给用户看的。就用b和strong标签做例子吧。
*/

// http://www.imooc.com/article/details/id/10377
// 面试答案

/*
 CSS

1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
  CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height).
  标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
    标准的css盒子模型宽高就是内容区宽高
    低端IE css盒子模型宽高 内边距﹢边界﹢内容区
2. CSS选择符有哪些？哪些属性可以继承？
  * 1.id选择器( # myid)
  2.类选择器(.myclassname)
  3.标签选择器(div, h1, p)
  4.相邻选择器(h1 + p)
  5.子选择器(ul < li)
  6.后代选择器(li a)
  7.通配符选择器( * )
  8.属性选择器(a[rel = "external"])
  9.伪类选择器(a: hover, li: nth - child)
  * 可继承： font-size font-family color, UL LI DL DD DT;
  * 不可继承 ：border padding margin width height ;
3. CSS优先级算法如何计算？
  * 优先级就近原则，样式定义最近者为准;!important > id > class > tag  important 比 内联优先级高
4. CSS3新增伪类有那些？
  p:first-of-type
  p:only-of-type
  p:only-child
  p:nth-child(2)
  :enabled、:disabled 控制表单控件的禁用状态。
  :checked，单选框或复选框被选中。
5. 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
  div{ width:200px; margin:0 auto; }
  居中一个浮动元素
  确定容器的宽高宽500 高 300 的层 设置层的外边距 .div
  { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;
  相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}
  css3 transform:translate(-50%, -50%);
  {width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto; 水平和垂直都居中 }
6. display有哪些值? 说明他们的作用.
  display:none,block,inline,inline-block,table,table-cell,inherit
7.position的值relative和absolute定位原点是?
  relative在以自己原本所在位置为原点
  absolute相对于 static 定位以外的第一个父元素进行定位。左上角为0，0原点
8.CSS3有哪些新特性？
  1.CSS3的选择器
    1）E:last-child 匹配父元素的最后一个子元素E。
    2）E:nth-child(n)匹配父元素的第n个子元素E。
    3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
  2.@Font-face 特性
    Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
  3.圆角border-radius    4.阴影shadow
  5.CSS3的渐变效果        6.css弹性盒子模型 Flex Box
  7.Transition  Transforms Animation
9.请解释一下CSS3的Flexbox（弹性盒布局模型），以及适用场景？
  该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。
   一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
   较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
   采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
   它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
   常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
   在布局上有了比以前更加灵活的空间。
10.用纯CSS创建一个三角形的原理是什么
  采用的是均分原理?
  demo {
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color: transparent transparent red transparent;
  }
11. 一个满屏品字布局如何设计?
   简单的方式：
   上面的div宽100%，
   下面的两个div分别宽50%，
   然后用float或者inline使其不换行即可
12. 常见兼容性问题?
   png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
   浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
   IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
   浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
   这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
   渐进识别的方式，从总体中逐渐排除局部。
   首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
   接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
   css
   .bb{
   background-color:red;/所有识别/
   background-color:#00deff\9; /IE6、7、8识别/
   +background-color:#a200ff;/IE6、7识别/
   _background-color:#1e0bd1;/IE6识别/
   }
   IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性。
   解决方法:统一通过getAttribute()获取自定义属性。
   IE下,even对象有x,y属性,但是没有pageX,pageY属性;
   Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
   解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
   Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
   可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
   超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
   L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
13. li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
   行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
14. 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧？
   png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
   浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
   IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
   浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
   这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
   渐进识别的方式，从总体中逐渐排除局部。
   首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
   接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
   css
   .bb{
   background-color:red;/所有识别/
   background-color:#00deff\9; /IE6、7、8识别/
   +background-color:#a200ff;/IE6、7识别/
   _background-color:#1e0bd1;/IE6识别/
   }
   IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性。
   解决方法:统一通过getAttribute()获取自定义属性。
   IE下,even对象有x,y属性,但是没有pageX,pageY属性;
   Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
   解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
   Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
   可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
   超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
   L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
15. 为什么要初始化CSS样式。
   因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
   当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
   最简单的初始化方法： {padding: 0; margin: 0;} （强烈不建议）
   淘宝的样式初始化代码：
   body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset,
    legend, button, input, textarea, th, td { margin:0; padding:0; }
   body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
   h1, h2, h3, h4, h5, h6{ font-size:100%; }
   address, cite, dfn, em, var { font-style:normal; }
   code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
   small{ font-size:12px; }
   ul, ol { list-style:none; }
   a { text-decoration:none; }
   a:hover { text-decoration:underline; }
   sup { vertical-align:text-top; }
   sub{ vertical-align:text-bottom; }
   legend { color:#000; }
   fieldset, img { border:0; }
   button, input, select, textarea { font-size:100%; }
   table { border-collapse:collapse; border-spacing:0; }
16. absolute的containing block计算方式跟正常流有什么不同？
   无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
   1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box
    (除 margin, border 外的区域) 的最小矩形；
   2、否则,则由这个祖先元素的 padding box 构成。
   如果都找不到，则为 initial containing block。
17. CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
   collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
18. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
   1、如果元素的display: none，那么position，float不起作用。
   2、如果元素拥有position: absolute或position: fixed属性，那么float不起作用。
   3、如果元素的float属性值不是none，元素会脱离文档流，根据float属性值来显示。
   4、设置了float、position: absolute、display: inline-block属性的元素，margin不会和垂直方向上的其他元素的margin发生外边距合并。
   5、设置了overflow: hidden属性的元素，不和它的子元素发生margin合并。
19. 对BFC规范(块级格式化上下文：block formatting context)的理解？
   （W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
   一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
   不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
20. CSS权重优先级是如何计算的？
   以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
   /权重为10+10+1=21/
   .class1 .class2 div{
   }如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
21. 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
   清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
   1、父级div定义height；
   2、父级div 也一起浮动；
   3、常规的使用一个class；
   .clearfix:before, .clearfix:after {
   content: " ";
   display: table;
   }
   .clearfix:after {
   clear: both;
   }
   .clearfix {
   *zoom: 1;
   }
22. 移动端的布局用过媒体查询吗？
   假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来， 而显示设备、屏幕投影和打印等这些媒介都有自己的特点，
   CSS就是为文档提供在不同媒介上展示的适配方法
   当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。 当媒体查询返回假， 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。
   包含了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表范围的表达式。 CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
   @media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } }
23. 使用 CSS 预处理器吗？喜欢那个？
 LESS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)
24. CSS优化、提高性能的方法有哪些？
   关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
   如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
   提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
   使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
25. 浏览器是怎样解析CSS选择器的？
   样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。
   只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
26. 在网页中的应该使用奇数还是偶数的字体？为什么呢？
  偶数字号相对更容易和 web 设计的其他部分构成比例关系。
27. margin和padding分别适合什么场景使用？
   margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
   margin用于布局分开元素使元素与元素互不相干；
   padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段
28. 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
   http://www.uml.org.cn/html/2016091805.asp
29. 元素竖向的百分比设定是相对于容器的高度吗？
   这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，
   但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，
   依据的也是父容器的宽度，而不是高度。
30. 全屏滚动的原理是什么？用到了CSS的那些属性？
  http://www.cnblogs.com/luochp3/p/5773313.html
31. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
   页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，
   包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、
   图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。
   响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
32. 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
    http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html
33. ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
   单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
   双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
   比如:first-line、:first-letter、:before、:after等，
   而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
   想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
   在代码顺序上，::after生成的内容也比::before生成的内容靠后。
   如果按堆栈视角，::after生成的内容会在::before生成的内容之上
34. 如何修改chrome记住密码后自动填充表单的黄色背景 ？
   input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
   background-color: rgb(250, 255, 189); / #FAFFBD; /
   background-image: none;
   color: rgb(0, 0, 0);
   }
35. 你对line-height是如何理解的？
   css中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用
   有时候可以用其剧中
36. 设置元素浮动后，该元素的display值是多少？（自动变成display:block）
37. 怎么让Chrome支持小于12px的文字？
    -webkit-text-size-adjust:none
38. 让页面里的字体变清晰，变细用CSS怎么做？
    （-webkit-font-smoothing: antialiased;）
39. font-style属性可以让它赋值为“oblique” oblique是什么意思？
    倾斜的字体样式
40. position:fixed;在android下无效怎么处理？
   fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，
   原来的网页还好好的在那，fixed的内容也没有变过位置，
   所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的。
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
41. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
    多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
42. display:inline-block 什么时候会显示间隙？(携程)
   移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
43. overflow: scroll时不能平滑滚动的问题怎么处理？
    -webkit-overflow-scrolling: touch;
44. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
  css3 flexbox
     .box {
     width:200px;
     height:300px;
     background:red;
     display:flex;
     display: -webkit-flex;
     flex-direction:column;
     -webkit-flex-direction:row;}
     .a {height:100px;background:green;}
     .b {background:blue;flex:1}
  css 外容器：position:relative。高度固定为100px的盒子使用相对定位，高度要求自适应的盒子使用绝对定位，再设定它的top：100px;left:0;bottom:0;
  js 实时获取高度在添加高度
45. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
   WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；
   同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
46. 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
   如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
   所以不如隔离开。
   因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
   这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
   同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
   提高了webserver的http请求的解析速度。
47. style标签写在body后与body前有什么区别？
  https://www.zhihu.com/question/39840003
  不过网页浏览器一直有容错设计。如果style元素出现在body元素，最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或重新布局。
 */

/*
 JavaScript

1. 介绍JavaScript的基本数据类型。
  字符串、数字、布尔、数组、对象、Null、Undefined
2. 说说写JavaScript的基本规范？
   1.不要在同一行声明多个变量
   2.请使用 ===/!==来比较true/false或者数值
   3.使用字面量代替new Array（）这种形式
   4.不要使用全局函数
   5.Switch必须使用default分支
   6.函数不应该有时候有返回值，有时候没有返回值（建议最好都要有返回值:undefined）
   7.for循环和if语句必须使用花括号
   .减少全局污染
   .写注释。
   8.for in 循环中的变量 应该使用var 关键字限定作用域，从而避免作用域污染
3. JavaScript原型，原型链 ? 有什么特点？
   每个对象都会在其内部初始化一个属性，就是prototype(原型)。
   当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
      于是就这样一直找下去，也就是我们平时所说的原型链的概念。
   JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
   当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
4. JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
   栈：原始数据类型（Undefined，Null，Boolean，Number、String）
   堆：引用数据类型（对象、数组和函数）
   两种类型的区别是：存储位置不同；
   http://blog.csdn.net/lxcao/article/details/52749421
5. Javascript如何实现继承？
   1.原型链  SubType.prototype = new SuperType();
   2.借用构造函数 function SubType() { SuperType.call(this);//继承了SuperType}
   3.组合继承 function SubType() { SuperType.call(this);//继承了SuperType} SubType.prototype = new SuperType(); Subtype.prototype.constructor = Subtype;
   4.原型式继承function object(o) { function F(){} F.prototype = o; return new F(); }
   5.寄生式继承
   6.寄生组合式继承
6. Javascript创建对象的几种方式？
   一、通过”字面量“方式创建。 var a = {}
   二、通过”构造函数“方式创建。var a = new Function()
   三、通过object方式创建。 var obj = new Object();
7. Javascript作用链域?
   执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，
   当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。
   代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain,不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。
8. 谈谈This对象的理解。
   this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写
9. eval是做什么的？
   把字符串参数解析成js代码并运行，并返回执行的结果；
10. 什么是window对象? 什么是document对象?
   简单来说，document是window的一个对象属性。
   Window 对象表示浏览器中打开的窗口。
   如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
   所有的全局函数和对象都属于Window 对象的属性和方法。
   document   对 Document 对象的只读引用。
   1、window 指窗体。document指页面。document是window的一个子对象。
   2、用户不能改变 document.location(因为这是当前显示文档的位置)。
    但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
11. null，undefined的区别？
   null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
   null表示"没有对象"，即该处不应该有值
   （1） 作为函数的参数，表示该函数的参数不是对象。
   （2） 作为对象原型链的终点。
   undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
   （1）变量被声明了，但没有赋值时，就等于undefined。
   （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
   （3）对象没有赋值的属性，该属性的值为undefined。
   （4）函数没有返回值时，默认返回undefined。
12. 写一个通用的事件侦听器函数(机试题)。
    markyun.Event = {
      // 页面加载完后
      readyEvent: function (fn) {
        if (fn == null) {
          fn = document
        }
        var oldonload = window.onload
        if (typeof window.onload != 'function') {
          window.onload = fn
        } else {
          window.onload = function () {
            oldonload()
            fn()
          }
        }
      },
      // 视能力分别使用dom0||dom2||IE方式 来绑定事件
      // 参数： 操作的元素,事件名称 ,事件处理程序
      addEvent: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false)
        } else if (element.attachEvent) {
          element.attachEvent('on' + type, function () {
            handler.call(element)
          })
        } else {
          element['on' + type] = handler
        }
      },
      // 移除事件
      removeEvent: function (element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false)
        } else if (element.detachEvent) {
          element.detachEvent('on' + type, handler)
        } else {
          element['on' + type] = null
        }
      },
      // 阻止事件（主要是冒泡时间，因为IE不支持事件捕获）
      stopPropagation: function (ev) {
        if (ev.stopPropagation) {
          ev.stopPropagation()
        } else {
          ev.cancelBubble = true
        }
      },
      // 取消事件的默认行为
      preventDefault: function (event) {
        if (event.preventDefault) {
          event.preventDefault()
        } else {
          event.returnValue = false
        }
      },
      // 获取事件m目标
      getTarget: function (event) {
        return event.target || event.srcElement
      },
      // 获取event对象的引用，取到事件的事件的所有信息，确保随时能使用event
      getEvent: function (e) {
        var ev = e || window.event
        if (!ev) {
          var c = this.getEvent.caller
          while (c) {
            ev = c.arguments[0]
            if (ev && Event == ev.constructor) {
              break
            }
            c = c.caller
          }
        }
        return ev
      }
    }
13. [“1”, “2”, “3”].map(parseInt) 答案是多少？
    1,NaN、NaN  parseInt默认为0 十进制
14. 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
   1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript
   侦测到的行为
   2. 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
   3. ev.stopPropagation();
   注意旧ie的方法：ev.cancelBubble = true;
15. 什么是闭包（closure），为什么要用它？
   闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,
   利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
   1.函数内再嵌套函数
   2.内部函数可以引用外层的参数和变量
   3.参数和变量不会被垃圾回收机制回收
16. javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
    除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
   2.为什么用严格模式
   - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
   - 消除代码运行的一些不安全之处，保证代码运行的安全；
   - 提高编译器效率，增加运行速度；
   - 为未来新版本的Javascript做好铺垫。
   "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
   另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。
   掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
17. 如何判断一个对象是否属于某个类？
    constructor
    instanceof
18. new操作符具体干了什么呢?
   1、创建一个空对象
   2、设置原型链
   3、让Func中的this指向obj，并执行Func的函数体。
   4、判断Func的返回值类型：如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
19. 用原生JavaScript的实现过什么功能吗？
20. Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
    hasOwnProperty
21. 对JSON的了解？
   JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
   它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
   {'age':'12', 'name':'back'}
22. [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
    给所有元素加上一个随机颜色的外边框
23. js延迟加载的方式有哪些？
    defer和async、动态创建DOM方式（用得最多）、按需异步载入js
24. Ajax 是什么? 如何创建一个Ajax？
    Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。
   var xmlhttp;
   if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }else{// 兼容 IE6, IE5
   xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.open(method,url,async);
   send(string)
   xmlhttp.open("POST","ajax_test.html",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("fname=Henry&lname=Ford");
   同步处理
   xmlhttp.open("GET","ajax_info.txt",false);
   xmlhttp.send();
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    异步处理
   xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 &&xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
25. 同步和异步的区别?
26. 如何解决跨域问题?
   1）CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。
   CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
   后端设置 Access-Control-Allow-Origin 头即可
   2）JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：callback({"name","name1"});
    缺点它只支持GET请求而不支持POST等其它类型的HTTP请求；
    它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
   3） document.domain + iframe （iframe的使用主要是为了ajax通信）
    document.domain设置为相同域名
    4）第四： 使用window.name + iframe即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，
    每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的.
    5）window.postMessage(message,targetOrigin)
27. 页面编码和被请求的资源编码如果不一致如何处理？
   <script src="http://www.xxx.com/test.js" charset="utf-8"></script>
   同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset="gbk"
   在请求的资源加上charset
28. 模块化开发怎么做？
    立即执行函数,不暴露私有成员
    var module1 = (function(){
      var m1 = function(){}
      return{
        m1:m1
      }
    })()
29. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
   1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
      CMD 推崇 as lazy as possible.
   2. CMD 推崇依赖就近，AMD 推崇依赖前置。
30. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
   依次加载require的模块，然后监测script的onload事件，判断所有模块加载成功，执行require的callback,如果只带一个参数且不是数组，就是加载成功后return 模块。
   核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存
31. 让你自己设计实现一个requireJS，你会怎么做？
 //标记已经加载成功的个数
 var REQ_TOTAL = 0;
 //模块导出
 window.exports = {};
 //记录各个模块的顺序
 var exp_arr = [];
 //判断是否数组
 function isArray(param) {
    return param instanceof Array;
 }
 //require 真正实现
 function require(arr, callback) {
   var req_list;
   if(isArray(arr)) {
      req_list = arr;
   } else {
      req_list = [arr];
   }
   var req_len = req_list.length;
   //模块逐个加载
   for(var i=0;i<req_len;i++) {
      var req_item = req_list[i];
      var $script = createScript(req_item, i);
      var $node = document.querySelector('head');
      (function($script) {
      //检测script 的onload事件
          $script.onload = function() {
            REQ_TOTAL++;
            var script_index = $script.getAttribute('index');
            exp_arr[script_index] = exports;
            window.exports = {};
            //所有链接加载成功后，执行callback
            if(REQ_TOTAL == req_len) {
              callback && callback.apply(exports, exp_arr);
            }
          }
          $node.appendChild($script);
        })($script);
    }
  }
   //创建一个script标签
   function createScript(src, index) {
      var $script = document.createElement('script');
      $script.setAttribute('src', src);
      $script.setAttribute('index', index);
       return $script;
   }
32. 谈一谈你对ECMAScript6的了解？
   Default Parameters（默认参数） in ES6
   Template Literals （模板文本）in ES6
   Multi-line Strings （多行字符串）in ES6
   Destructuring Assignment （解构赋值）in ES6
   Enhanced Object Literals （增强的对象文本）in ES6
   Arrow Functions （箭头函数）in ES6
   Promises in ES6
   Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
   Classes（类） in ES6
   Modules（模块） in ES6
33. ECMAScript6 怎么写class么，为什么会出现class这种东西?
    加入这个语法糖可以让有OOP基础的人更快上手js，至少是一个官方的实现了。但对熟悉js的人来说，这个东西没啥大影响；一个Object.creat()搞定继承，比class简洁清晰的多。
34. 异步加载的方式有哪些？
   (1) defer，只支持IE
   (2) async：
   (3) 创建script，插入到DOM中，加载完毕后callBack
35. documen.write和 innerHTML的区别?
   document.write只能重绘整个页面
   innerHTML可以重绘页面的一部分
36. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
   createDocumentFragment()    //创建一个DOM片段
   createElement()   //创建一个具体的元素
   createTextNode()   //创建一个文本节点
   appendChild()
   removeChild()
   replaceChild()
   insertBefore()
   getElementsByTagName()    //通过标签名称
   getElementsByName()    //通过元素的Name属性的值
   getElementById()    //通过元素Id，唯一性
37. .call() 和 .apply() 的含义和区别？
    .call(this, a, a)  .apply(this, [a, a])
38. 数组和对象有哪些原生方法，列举一下？
39. JS 怎么实现一个类。怎么实例化这个类
40. JavaScript中的作用域与变量声明提升？
41. 如何编写高性能的Javascript
   http://www.cnblogs.com/MarcoHan/p/5315361.html？
   二、使用局部变量
   三、避免增长作用域链 with、try-catch
   四、字符串链接优化 Array.join链接
42. 那些操作会造成内存泄漏？
   内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
   垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。
   如果一个对象的引用数量为 0(没有其他对象引用过该对象)，或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
   setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
   闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时，就会产生一个循环)。
43. JQuery的源码看过吗？能不能简单概况一下它的实现原理？
  https://www.zhihu.com/question/20521802
44. jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45. jquery中如何将数组转化为json字符串，然后再转化回来？
46. jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47. jquery.extend 与 jquery.fn.extend的区别？
   jquery.extend 为jquery类添加类方法，可以理解为添加静态方法
   * jquery.fn.extend:
   源码中jquery.fn= jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数
   使用：
   jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。
48. jQuery 的队列是如何实现的？队列可以用在哪些地方？
49. 谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50. JQuery一个对象可以同时绑定多个事件，这是如何实现的？
 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
 jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
 针对 jQuery性能的优化方法？
 Jquery与jQuery UI有啥区别？
 JQuery的源码看过吗？能不能简单说一下它的实现原理？
 jquery 中如何将数组转化为json字符串，然后再转化回来？
 jQuery和Zepto的区别？各自的使用场景？
 针对 jQuery 的优化方法？
 Zepto的点透问题如何解决？
 jQueryUI如何自定义组件?
 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
 如何判断当前脚本运行在浏览器还是node环境中？（阿里）
    this === window ? 'browser' : 'node';
    通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中
 移动端最小触控区域是多大？
 jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？
  （click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
 Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
 解释JavaScript中的作用域与变量声明提升？
 那些操作会造成内存泄漏？
 JQuery一个对象可以同时绑定多个事件，这是如何实现的？
 Node.js的适用场景？
 (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
 解释一下 Backbone 的 MVC 实现方式？
 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
 简述一下 Handlebars 的基本用法？
 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
 用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
 检测浏览器版本版本有哪些方式？
 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
 */
